<template>
  <div class="">
    <div v-if="payType !== '1'">
      <div class="logo-nav">
        <img src="../../images/knife_logo.png" alt="">
      </div>
      <div class="orderpay-box knife_container">
        <section class="qrcode-box">
          <p>正在支付<i class="el-icon-loading"></i></p>
        </section>
      </div>
    </div>
    <form :action="bankPayObj.url" ref="submitForm" @submit.prevent method="post" enctype="application/x-www-form-urlencoded">
      <input type="hidden" name="cmd_id" :value="bankPayObj['cmdId']"/> <br>
      <input type="hidden" name="mer_cust_id" :value="bankPayObj['merCustId']"/> <br>
      <input type="hidden" name="version" :value="bankPayObj['version']"/> <br>
      <input type="hidden" name="check_value" :value="bankPayObj['sign']"/> <br>
    </form>
</div>
</template>

<script>
import {Tabs, TabPane, Checkbox, RadioGroup, Radio, Button, Dialog} from 'element-ui'
import {payredirect} from '@/service/get-data'
// import {mapActions} from 'vuex
// import http from '@/config/http'
export default {
  components: {
    elTabs: Tabs,
    elTabPane: TabPane,
    elCheckbox: Checkbox,
    elRadioGroup: RadioGroup,
    elRadio: Radio,
    elButton: Button,
    elDialog: Dialog
  },
  data () {
    return {
      orderId: '',
      payType: '',
      payMode: '',
      bankPayObj: {}
    }
  },
  computed: {
  },
  methods: {
    // 支付接口
    async fetchPayCreate () {
      let query = this.$route.query
      this.orderId = query.rid
      this.payType = query.payType
      this.payMode = query.payMode
      let res = await payredirect(this.orderId, this.payType, this.payMode)
      if (res.data.resultCode && res.data.resultCode === 2000) {
        res = res.data.data
        this.bankPayObj = res
        this.$nextTick(() => {
          // this.$refs.submitForm.setAttribute('target', '_blank')
          this.$refs.submitForm.submit()
        })
      } else {
        this.$message({
          message: res.data.resultMsg
        })
      }
    }
  },
  mounted () {
    this.fetchPayCreate()
  }
}
</script>

<style lang="scss" scoped>
.logo-nav{
  background: #f7f7f7;
  text-align: center;
  padding: 25px 0;
  img{
    width: 250px;
  }
}
.orderpay-box{
    position: relative;
    margin-bottom: 50px;
    margin-top: 20px;
  }
  .qrcode-box{
   text-align: center;
    padding: 60px 0;
    background: #fff;
    border: 1px solid #d8dce5;
    font-size: 20px;
    color: #ffcc00;
  }
  .qrcode-title{
    text-align: center;
    background: #f7f7f7;
    border-bottom: 1px solid #d8dce5;
  }
  .qrcode-div{
    width: 250px;
    height: 250px;
    margin-top: 20px;
    img{
      width: 100%;
    }
  }
  .pay-btn{
    width: 150px;
    padding: 12px 0;
    display: inline-block;
    text-align: center;
    background: #ffcc00;
    color: #fff;
    border-radius: 5px;
  }
</style>
